import "./button.scss";
import classNames from "classnames";
import { UpLoad } from "../svg/svg";
type ButtonProps = React.HTMLAttributes<HTMLButtonElement> & {
  icon?: React.ReactNode;
  iconPosition?: "left" | "right";
  label: string | React.ReactElement;
  isLinear?: boolean;
  disabled?: boolean;
  /**
   * 标记为弃用
   * @deprecated 该属性已经弃用
   */
  color?: string;
  onClick?: () => void;
  isShadow?: boolean;
  className?: string;
  ref?: React.MutableRefObject<any>;
};

type FileUpLoadProps = {
  // 按钮的文字
  label?: string;
  // 选择文件后的回调
  onChange?: (e?: any) => void;
  className?: string;
  accept?: string;
  id?: number;
  disable?: boolean;
};

export const Button = ({
  icon = <></>,
  iconPosition,
  label = "",
  isLinear = false,
  disabled = false,
  color = "",
  className = "",
  onClick,
  ref,
  isShadow = false,
  ...rest
}: ButtonProps): React.ReactElement => {
  const handleClick = () => {
    onClick?.();
  };

  const buttonClassNames = (): string => {
    return classNames(
      "dashboard_btn",
      isLinear ? "show_linear" : "",
      isShadow ? "show_shadow" : "",
      disabled ? "disable" : "",
      className
    );
  };

  return (
    <>
      <button
        className={buttonClassNames()}
        style={{ background: color }}
        onClick={handleClick}
        ref={ref}
        {...rest}
      >
        {iconPosition === "left" && icon}
        <span>{label}</span>
        {iconPosition === "right" && icon}
      </button>
    </>
  );
};

export const UploadButton = ({
  label,
  onChange,
  className,
  accept = ".xls , .xlsx",
  id = 0,
  disable,
  ...rest
}: FileUpLoadProps) => {
  return (
    <label
      htmlFor={`dashboard_file_up_load_${id}`}
      className="dashboadr_file_up_load_button"
    >
      <input
        {...rest}
        type="file"
        id={`dashboard_file_up_load_${id}`}
        accept={accept}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange?.(e)}
        disabled={disable}
      />
      <span className="dashboard_file_up_load_label">
        <UpLoad color="#fff" className="dashboard_svg" />
        {label}
      </span>
    </label>
  );
};
